<template>
  <div class="foodbox">
    <loading></loading>
    <div class="smallfoodbox">
      <div class="firstbox" v-for='(item,index) in items' :key = index >
        <div class="_box">
          <div class="box_img" >
            <img src="../assets/eat-1.jpeg" />
          </div>
          <div class="box_Context">  {{item.context}}
          </div>
        </div>
        <div class="_box">
          <div class="box_img" >
            <img src="../assets/eat-1.jpeg" />
          </div>
          <div class="box_Context">  {{item.context}}
          </div>
        </div>
      </div>
    </div>
        <div @click="getbasemes">
      <leftopic>
        <div slot="firstfont">精</div>
        <div slot="secondfont">致</div>
        <div slot="thirdfont">食</div>
        <div slot="fourfont">谱</div>
      </leftopic>
    </div>
     <div v-if="load_basebool">
    <vue-loading type="spiningDubbles" color="black" :size="{ width: '60px'}" :style="{position:'relative'}"></vue-loading>
    </div>
  </div>
</template>
<script src="../js/cookbook.js"></script>
<style scoped>
  @import "../css/cookbook.css";
</style>
